<template>
	<view
		class="user-level"
		:style="{
			'width': `${width}rpx`,
			'font-size': `${fontSize}rpx`
		}"
	>
		<u-line-progress
			class="u-flex-1 u-margin-right-10"
			active-color="#6782F1"
			inactive-color="#FFFFFF"
			:percent="level.percent"
			:height="height"
			:show-percent="false"
			striped-active
			striped
		/>
		{{level.label}}
	</view>
</template>

<script>
import { USER_LEVEL } from '@/static/staticData.js'
export default {
  name: 'aha-user-level',
  props: {
    point: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 20
    },
    width: {
      type: Number,
      default: 250
    },
    fontSize: {
      type: Number,
      default: 22
    },
  },
  computed: {
    /**
     * 根据用户aha点和等级制度，计算百分比
     */
    level() {
      /* 找到第一个比自己点数大的等级，取它的n-1作为等级，这个下标肯定会大于1， */
      const index = USER_LEVEL.findIndex(item => item.ahaPoint > this.point)

      if (index === -1) { // 溢出， 返回顶级
        return {
          percent: 100,
          label: USER_LEVEL[ USER_LEVEL.length - 1 ].label
        }
      }
      const currentLevel = USER_LEVEL[ index - 1 ]
      const nextLevel = USER_LEVEL[ index ]

      /*
        当前等级的aha点百分比情况：
        总aha点 = 下个等级的aha点起点 - 当前等级的aha点起点
        已有aha点 = 自己的aha点 - 当前等级aha点的起点
      */
      return {
        percent: (this.point - currentLevel.ahaPoint) / (nextLevel.ahaPoint - currentLevel.ahaPoint) * 100,
        label: currentLevel.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-level {
  display: flex;
  align-items: center;
}
</style>
